<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 306px;

        }
        ul li{
            float: left;
            width:100px;
            height: 35px;
            text-align: center;
            line-height: 35ox;
            background: lightblue;
            color: #fff;
            border: 1px solid #ddd;
            cursor: pointer;
        }
        div{
            position: absolute;
            width: 306px;
            height: 300px;
            /*background: red;*/
            color: #fff;
            left: 0;
            top: 37px;
            display: block;
            font-size: 50px;
            font-weight: bold;
            text-align: center;
            line-height: 300px;
            z-index: -1;
        }
        div:nth-of-type(1){
            background: pink;
        }
        div:nth-of-type(2){
            background: deeppink;
        }
        div:nth-of-type(3){
            background: hotpink;
        }
    </style>

</head>
<body>

<ul>
    <li>选项一</li>
    <li>选项二</li>
    <li>选项三</li>
</ul>
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>

<script>

function Person(){
    //获取元素
    this.div = document.getElementsByTagName("div");
    this.li = document.getElementsByTagName("li");
//    console.log(this)
    for(var i=0;i<this.li.length;i++){
        this.li[i].index = i;
        this.li[i].onclick = function () {
//            执行原型里的方法
            str.show(this);
        }
    }
}
//原型方法
Person.prototype.show = function (n) {
//    先初始化
       for(var j=0;j<this.li.length;j++){
           this.li[j].style.background = "lightblue";
           this.div[j].style.display = "none";
       }
         n.style.background = "blue";
         n.style.color = "red";
         this.div[n.index].style.display = "block";
         this.div[n.index].style.color = "red";
}
var str = new Person()

</script>
</body>
</html>